<template>
  <div class="app-container">
    <el-tabs v-model="tabs.activeTabName">
      <el-tab-pane label="代码生成(模板)" name="first">
        <el-row>
          <el-col :span="6">
            <table-manage ref="firstTableManage" />
          </el-col>
          <el-col :span="17" class="margin-left">
            <el-row>
              <el-col :span="24">
                <el-select v-model="input.renameStrategy" size="small" style="width: 240px">
                  <el-option v-for="renameStrategy in renameStrategies" :key="renameStrategy" :value="renameStrategy" :label="renameStrategy" />
                </el-select>
                <el-checkbox v-model="input.single" class="margin-left">单文件</el-checkbox>
                <el-button type="primary" size="small" class="margin-left" @click="generateCodeConfirm">确认参数后生成</el-button>
              </el-col>
            </el-row>
            <el-row class="margin-top">
              <schema-manage ref="schemaManage" />
            </el-row>
            <el-row class="margin-top">
              <package-config ref="firstPackageConfig" />
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="代码生成(mapper)" name="second">
        <el-row>
          <el-col :span="24">
            <mapper-build />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="代码生成(project)" name="third">
        <el-row>
          <el-col :span="24">
            <project-build />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="dialog.templateConfirm.visible" :title="dialog.templateConfirm.title">
      <vue-json-editor style="height: 70vh;" class="editor-wrapper" v-model="dialog.templateConfirm.params" :expanded-on-start="true" :show-btns="false" lang="zh" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="generateCode">生 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import database from '../../../api/database'
import core from '../../../api/core'

import SchemaManage from '../SchemaManage'
import TableManage from '../TableManage'
import MapperBuild from './MapperBuild'
import PackageConfig from './PackageConfig'
import vueJsonEditor from 'vue-json-editor'
import ProjectBuild from './ProjectBuild'

export default {
  name: 'codeGenerate',
  components: { SchemaManage, TableManage, MapperBuild, PackageConfig, vueJsonEditor, ProjectBuild },
  data() {
    return {
      input: {
        renameStrategy: null,
        single: true
      },
      tabs: {
        activeTabName: 'first'
      },
      renameStrategies: [],
      dialog: {
        templateConfirm: {
          visible: false,
          title: '确认配置是否正确',
          params: {}
        }
      }
    }
  },
  computed: {

  },

  mounted() {
    // 加载所有的重命名策略
    database.renameStrategies().then(res => {
      this.renameStrategies = res.data
      if (res.data && res.data.length > 0) {
        this.input.renameStrategy = res.data[0]
      }
    })
  },
  methods: {
    generateCodeConfirm() {
      const dataSource = this.$refs.firstTableManage.getDataSource()
      if (!dataSource) {
        return
      }
      let actualDatasource = {connName:dataSource.connName,namespace: dataSource.namespace};
      actualDatasource.tableNames = dataSource.tables.map(item => item.table.actualTableName.tableName)

      const schema = this.$refs.schemaManage.getSchema()
      const packageConfig = this.$refs.firstPackageConfig.getPackageConfig()

      // 获取方案的模板列表
      database.codeSchemaTemplates(schema).then(res => {
        const templates = res.data
        this.dialog.templateConfirm.params = { templates: templates, dataSourceConfig: actualDatasource, packageConfig: packageConfig, renameStrategyName: this.input.renameStrategy, single: this.input.single }
        this.dialog.templateConfirm.visible = true
      })
    },
    generateCode() {
      database.codeGenerate(this.dialog.templateConfirm.params).then(res => {
        core.fileDownload(res.data)
        this.dialog.templateConfirm.visible = false
      })
    }
  }
}
</script>

<style scoped>
.editor-wrapper{
  position: relative;
}

/deep/ .jsoneditor-vue{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

</style>
